<template>
        <div class="menu">
            <div class="name" @click="appear1">walk</div>
            <div class="name" @click="appear2">tea</div>
            <div class="name" @click="appear3">read</div>
        </div>
        <div class="content">
            <div v-show="display1">1</div>
            <div v-show="display2">2</div>
            <div v-show="display3">3</div>
        </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios';
const display1 = ref(false)
const display2 = ref(false)
const display3 = ref(false)
const appear1 = () => {
    display1.value = true
    display2.value = false
    display3.value = false
}
const appear2 = () => {
    display1.value = false
    display2.value = true
    display3.value = false
}
const appear3 = () => {
    display1.value = false
    display2.value = false
    display3.value = true
}
</script>

<style scoped>
.menu {
    display: flex;
}
.name {
    height: 30px;
    width: 40px;
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
}
.name:hover {
    cursor: pointer;
}
.content {
    height: 60px;
    width: 123px;
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>